//顶部缓动
function scrollFunction() {
    // 回顶部，页面进度条
    function toTop() {
        var toTop = document.getElementById("toTop");
        var NowScollY = 0
        var oProcess = document.getElementById("process");
        var oP = oProcess.getElementsByTagName("p")[0];
        onscroll = function () {
            oWidth = scrollY / (document.body.clientHeight - window.innerHeight) * 100 + "%"
            // console.log(width)
            oP.style.width = oWidth;
            NowScollY = scrollY;
            if (scrollY > 400) {
                toTop.style.display = "block"
            } else {
                toTop.style.display = "none"
            }
        }
        // console.log(topClient)
        toTop.onclick = function () {
            clearInterval(timer);
            var timer = setInterval(function () {
                let step = Math.ceil(-NowScollY) / 15;
                NowScollY = NowScollY + step
                window.scrollTo(0, NowScollY)
                if (NowScollY == 0) {
                    clearInterval(timer)
                }
            }, 10)
            if (NowScollY == 0) {
                clearInterval(timer)
            }
        }
        var header = document.getElementById("header");
        // console.log(header);
        header.scrollIntoView({
            behavior: "smooth"
        })
    }
    toTop()
}
scrollFunction()

//     //小圆点
//     for (let index = 0; index < oLi.length; index++) {
//         oPoint[index].onclick = function () {
//             for (let index = 0; index < oLi.length; index++) {
//                 resetPoint(oPoint[index])
//                 oPoint[index].flag = false
//                 // console.log( oPoint[index].flag)
//             }
//             chancePoint(oPoint[index]);
//             oPoint[index].flag = true

//             //点击转换



//         }

//         oPoint[index].onmouseover = function () {
//             // console.log(11111)
//             chancePoint(oPoint[index])

//         }

//         oPoint[index].onmouseout = function () {
//             if (!oPoint[index].flag) {
//                 resetPoint(oPoint[index])
//             }
//             // console.log(oPoint[index].flag)
//         }
//     }
//     //改变颜色

//     function chancePoint(arr) {
//         arr.style.background = "white";
//         // oPoint[0].style.transform="scale(1)";
//         arr.style.width = ".4rem";
//         arr.style.height = ".35rem";
//     }

//     function resetPoint(arr) {
//         arr.style.background = "black";
//         // oPoint[0].style.transform="scale(1)";
//         arr.style.width = ".1rem";
//         arr.style.height = ".1rem";
//     }
//     //    chancePoint()
//     let n = 0;
//     let m = -100;
//     var prevTimer = null;
//     var nextTimer = null;


// 轮播图部分的功能
function chanceImg() {
    let oul = document.getElementById("coverImg");
    let aLi = oul.getElementsByTagName("li");
    let oPrev = document.getElementsByClassName("prev")[0];
    let oNext = document.getElementsByClassName("next")[0];
    var clikFlag = null;
    let imgWidth = 100;
    var nowPlace = -100;
    let continueTime = 500 //transition-duration以及setTimeout的时间
    oul.style.left = nowPlace + "vw";

    //处理图片，将图片头尾增加一张
    function imgPreprocessing(){
           let imgFirst =document.createElement("li");
           let imgLast =document.createElement("li");
           imgFirst.innerHTML = oul.children[aLi.length-1].innerHTML;
           imgLast.innerHTML = oul.children[0].innerHTML;
           oul.insertBefore(imgFirst,oul.children[0])
           oul.appendChild(imgLast);
        //    console.log(oul)
    }
    imgPreprocessing()
    //创建轮播图小圆点
    function createPoint() {
        var oWeaper = document.getElementsByClassName("coverWeaper")[0];
        var oWeaperBottom = document.createElement("h3");
        oWeaper.appendChild(oWeaperBottom);
        oWeaperBottom.className="oWeaperBottom"
        var oPointWeaperOut = document.createElement("p");
        oWeaperBottom.appendChild(oPointWeaperOut);
        var oPoint = [];
        for (let index = 0; index < aLi.length-2; index++) {
            let oPointWeaper = document.createElement("i");
            oPointWeaperOut.appendChild(oPointWeaper);
            oPoint[index] = document.createElement("a");
            oPointWeaper.appendChild(oPoint[index])
        }
    }
    //点击小圆点
    var oWeaper = document.getElementsByClassName("coverWeaper")[0];
    var  aPointList = oWeaper.getElementsByTagName("i");
    function chancePoint(nowP){
        for (let index = 0; index < aPointList.length; index++) {
            let el = aPointList[index];
            el.onclick = function(){
                //按钮本身
                if(oWeaper.getElementsByClassName("nowPoint")[0] != undefined){
                    oWeaper.getElementsByClassName("nowPoint")[0].classList.remove("nowPoint")
                }
                el.classList.add("nowPoint");
                //按钮切换图片
                    nowPlace = -100*(index+1);
                    oul.style.left = nowPlace + "vw";
                    oul.style.transition = "all " + continueTime + "ms";
                
            }   
           
        }
        // 两种情况下，有参数是上下页的调用，没参数是初始化的时候的调用
        // if(nowP !=undefined){
        //     aPointList[nowP].click()
        // }else{
            aPointList[0].classList.add("nowPoint");   
        // }  
    }


    //上一张
    oPrev.onclick = function () {
        if (clikFlag == null) {
            clikFlag = 1;
            if (nowPlace == -imgWidth || nowPlace == -(aLi.length - 2) * imgWidth) {
                oul.style.transition = "all " + continueTime + "ms";
            }
            nowPlace += imgWidth;
            oul.style.left = nowPlace + "vw";
            // 控制小圆点
            if(oWeaper.getElementsByClassName("nowPoint")[0] != undefined){
                oWeaper.getElementsByClassName("nowPoint")[0].classList.remove("nowPoint")
            }
            aPointList[imgLinkPoint()].classList.add("nowPoint");
            // chancePoint(imgLinkPoint())
            // timesetInterval() 
            setTimeout(function () {
                if (nowPlace == 0) {
                    nowPlace = -(aLi.length - 2) * imgWidth;
                    oul.style.left = nowPlace + "vw";
                    oul.style.transition = "all";
                }
                clikFlag = null;
            }, continueTime) //毫秒数要和transition-duration同步
        }
    }
    //下一张
    oNext.onclick = function () {
        if (clikFlag == null) {
            clikFlag = 1;
            if (nowPlace == -imgWidth) {
                oul.style.transition = "all " + continueTime + "ms";
            }
            nowPlace -= imgWidth;
            oul.style.left = nowPlace + "vw";
            // timesetInterval() 
            // chancePoint(imgLinkPoint())
            // 控制小圆点
            if(oWeaper.getElementsByClassName("nowPoint")[0] != undefined){
                oWeaper.getElementsByClassName("nowPoint")[0].classList.remove("nowPoint")
            }
            aPointList[imgLinkPoint()].classList.add("nowPoint");
            setTimeout(function () {
                if (nowPlace == -(aLi.length - 1) * imgWidth) {
                    nowPlace = -imgWidth;
                    oul.style.left = nowPlace + "vw";
                    oul.style.transition = "all";
                }
                clikFlag = null;
            }, continueTime) //毫秒数要和transition-duration同步
        }
    }

    function imgLinkPoint(){
        if(nowPlace==-100||nowPlace==-100*(aLi.length-1)){
            return 0
        }else if(nowPlace==0||nowPlace==-100*(aLi.length-2)){
           return aPointList.length-1
        }else{
            return -(nowPlace+100)/100
        }
    }
    // function imgChangePoint(){

    // }
    createPoint()
    chancePoint()
}
chanceImg()
//滚动条动画
function InAnimation() {
    var clientHeight = document.documentElement.clientHeight;
    // console.log(clientHeight);
    var aboutMe = document.getElementById("aboutMeOuter");
    // console.log(aboutMe.getBoundingClientRect().top)
    var weaper = document.getElementById("weaper");
    // console.log(weaper.getBoundingClientRect().top)
    var aboutMeList = weaper.getElementsByTagName("li")
    // console.log(aboutMeList,length)
    var animationFlag = true;
    document.onscroll = function () {
        if (clientHeight > aboutMe.getBoundingClientRect().top) {
            aboutMe.classList.add("animated")
            aboutMe.classList.add("bounceInUp");
        }
        for (let index = 0; index < aboutMeList.length; index++) {
            var el = aboutMeList[index];
            if (clientHeight > el.getBoundingClientRect().top) {
                if (animationFlag) {
                    el.classList.add("animated")
                    el.classList.add("bounceInUp");
                    setTimeout(function () {
                        el.classList.remove("animated")
                        el.classList.remove("bounceInUp");
                    }, 2000)

                }
                if (index == aboutMeList.length - 1) {
                    animationFlag = false
                }
            }

        }

        // console.log(animationFlag)
        var idealTitle = document.getElementsByClassName("idealTitle");
        var idealTitleList = idealTitle[0].getElementsByTagName("li");
        // console.log(idealTitleList);
        el = idealTitleList[0];
        // console.log(el)
        if (clientHeight > el.getBoundingClientRect().top) {
            el.classList.add("animated");
            el.classList.add("bounceInLeft");
        }
        el = idealTitleList[1];
        if (clientHeight > el.getBoundingClientRect().top) {
            el.classList.add("animated");
            el.classList.add("bounceInRight");
        }
        var sectionWeaper = document.getElementById("sectionWeaper");
        // console.log(idealWeaper);
        var inFromLeft = sectionWeaper.getElementsByClassName("inFromLeft");
        // console.log(inFromLeft);
        var inFromRight = sectionWeaper.getElementsByClassName("inFromRight");
        for (let index = 0; index < inFromLeft.length; index++) {
            let el = inFromLeft[index];
            if (clientHeight > el.getBoundingClientRect().top) {
                el.classList.add("animated");
                el.classList.add("bounceInLeft");
            }
        }
        for (let index = 0; index < inFromRight.length; index++) {
            let el = inFromRight[index];
            if (clientHeight > el.getBoundingClientRect().top) {
                el.classList.add("animated");
                el.classList.add("bounceInRight");

            }
        }
        var blogWeaper = document.getElementById("blogWeaper");
        //  console.log(blogWeaper);
        if (clientHeight > blogWeaper.getBoundingClientRect().top) {
            blogWeaper.classList.add("animated");
            blogWeaper.classList.add("bounceInUp");

        }

    }
}
InAnimation();
//更多
function blogMore() {
    var blogMore = document.getElementById("blogMore");
    var blogMoreNum = 3;
    blogMore.onclick = function () {

        var blogBoxWeaper = document.getElementsByClassName("blogBoxWeaper");
        // console.log(blogBoxWeaper)
        for (let index = blogMoreNum; index < (blogMoreNum + 3);) {
            // console.log(2)
            let el = blogBoxWeaper[index];
            el.style.display = "flex";
            index++;
            if (index >= blogBoxWeaper.length) {
                var blogLast = document.createElement("div");
                blogLast.classList.add("blogLastOne");
                blogLast.innerText = "已经到底了~"
                blogMore.parentNode.insertBefore(blogLast, blogMore);
                break;
            }

        }
        blogMoreNum += 3;
    }

}
blogMore()
//选择数组
function chooseArr() {
    //篇章博客
    var oul = document.getElementById("weaper");
    var aLi = oul.getElementsByTagName("li");
    for (let index = 0; index < aLi.length; index++) {
        aLi[index].onclick = function () {
            // console.log(aLi[0]);
            localStorage.setItem("arrUrl", "content");
            console.log(1);
        }

    };
    // 日常博客
    var blogBox = document.getElementsByClassName("blogBox");
    // console.log(blogBox)
    // console.log(blogBox.length)
    for (let index = 0; index < blogBox.length; index++) {
        blogBox[index].onclick = function () {
            localStorage.setItem("arrUrl", "dailyContent")
        }
    }
}




//获取数据
function datebase(fn, url) {
    var xml = new XMLHttpRequest();
    xml.open("get", url, true);
    xml.send();
    xml.onreadystatechange = function () {
        if (this.status === 200) {
            if (this.readyState === 4) {
                // console.log(this.responseText)
                fn(this.responseText);
            }
        }
    }

}
//渲染dailyBlog
datebase(function (text) {
    var dailyBlog = JSON.parse(text);
    // console.log(dailyBlog);
    // var blogName = 
    var blogWeaper = document.getElementById("blogWeaper");
    var blogMainWeaper = blogWeaper.getElementsByClassName("blogMainWeaper")[0];
    // console.log(blogMainWeaper)
    var flag = 0;
    dailyBlog.forEach(function (el) {
        // console.log(blogMainWeaper)
        // console.log(el.blogTime.slice(5,9))
        var year = el.blogTime.slice(5, 9)
        // console.log(year)
        if (flag % 2 == 0) {
            blogMainWeaper.innerHTML += `<div class="blogBoxWeaper"><div class="blogBox"><div class="blogText"><h4><a href="./dayBlog.html?${el.id}">${el.blogName}</a></h4><span>${el.blogText}</span></div><div class="blogTimeWeaper"><div class="blogTime"><p>${el.blogTime.slice(10,15)}</p><span class="blogYear">${el.blogTime.slice(5,9)}</span></div><i><i class="blogPoint"></i></i></div></div></div>`
        } else {
            blogMainWeaper.innerHTML += `<div class="blogBoxWeaper rightBox"><div class="blogBox rightBox"><div class="blogText"><h4><a href="./dayBlog.html?${el.id}">${el.blogName}</a></h4><span>${el.blogText}</span></div><div class="blogTimeWeaper rightBox"><div class="blogTime"><p>${el.blogTime.slice(10,15)}</p><span class="blogYear">${el.blogTime.slice(5,9)}</span></div><i><i class="blogPoint"></i></i></div></div></div>`
        }
        flag++

    });
    //渲染结束后，给元素添加事件
    chooseArr();
}, "./datebase/dailyContent.json")


//渲染篇章卡片
datebase(function (text) {
    var blog = JSON.parse(text);
    var oul = document.getElementById("weaper");
    getSBButton(blog, oul)
}, "./datebase/content.json")




//篇章卡片
function getSBButton(blog, oul) {
    var sectionBlogButton = document.getElementById("sectionBlogButton");
    //   blog.forEach(function(el,index)
    for (let index = 0; index < Math.ceil(blog.length / 3); index++) {
        el = blog[index];
        let oLi = document.createElement("li");
        sectionBlogButton.appendChild(oLi);
        var aLiList = sectionBlogButton.getElementsByTagName("li");
        oLi.innerHTML = "<span id='pageNum'>" + (index + 1) + "</span>";
        oLi.onclick = function () {
            this.classList.add("nowPage")
            oul.innerHTML = ""
            for (let index2 = index * 3; index2 < (index + 1) * 3; index2++) {
                // console.log(index2);
                blog.forEach(function (text, n) {
                    if (text.id == index2 + 1) {
                        oul.innerHTML += `<li><a href="dayBlog.html?${text.id}"><img src="./img/aboutMe${text.coverImgNum}.jpg" alt=""></a><h4><a href="dayBlog.html?${text.id}">${text.blogName}</a></h4><p>${text.blogTitle}</p>
                        </li>`
                    }
                })
            }
        };
        if (oLi.innerText == 1) {
            oLi.onclick()
        }
    }
    buttonHidden(3, 2);
    chooseArr();

}
// 控制显示的个数
function buttonHidden(limitLeft, limitRight) {
    // console.log(1);
    let nowClick = 0;
    var oul = document.getElementById("sectionBlogButton");
    let aLi = oul.getElementsByTagName("li")
    if (aLi.length > limitLeft + limitRight + 2) {
        for (let index = 0; index < aLi.length; index++) {
            aLi[index].addEventListener("click", function () {
                //高亮：
                for (let i = 0; i < aLi.length; i++) {
                    let el = aLi[i];
                    el.classList.remove("nowPageNum");
                }
                aLi[index].classList.add("nowPageNum");
                if (index < limitLeft + 1) {
                    nowClick = 0;
                } else if (index > aLi.length - limitRight - 1) {
                    nowClick = aLi.length - limitRight - 1;
                } else {
                    nowClick = index;
                }
                // console.log(nowClick)
                showButton(nowClick, oul, aLi, limitLeft, limitRight)
            })


            // if (index == 0) {
            //     aLi[0].onclick();
            //     aLi[aLi.length-1].style.display="block"
            // }
        }
        // debugger
        aLi[0].click();
    } else {
        console.log(aLi.length);
        for (let index = 0; index < aLi.length; index++) {
            let el = aLi[index];
            el.style.display = "block";
        }
    }
}

//渲染出按钮
function showButton(nowClick, oul, aLi, limitLeft, limitRight) {
    // let aI = oul.getElementsByTagName("i")[0];
    let leftI = document.getElementById("leftI")
    let rightI = document.getElementById("rightI")
    for (let index = 0; index < aLi.length; index++) {
        if (index == 0 || index == aLi.length - 1) {
            continue
        }
        let el = aLi[index];
        el.style.display = "none"
    }
    // 头部处理
    if (nowClick == 0) {
        // console.log(1)
        if (rightI === null) {
            let oIs = document.createElement("i");
            oIs.id = "rightI"
            oIs.innerHTML = "......"
            oul.insertBefore(oIs, aLi[aLi.length - 1])
        }
        for (let index = 0; index < limitLeft + limitRight + 1; index++) {
            let el = aLi[index];
            el.style.display = "block"
        }
        if (leftI != null) {
            leftI.parentNode.removeChild(leftI)
        }
    }
    //尾部处理
    else if (nowClick == aLi.length - limitRight - 1) {
        if (leftI === null) {
            let oI = document.createElement("i");
            oI.id = "leftI"
            oI.innerHTML = "......"
            oul.insertBefore(oI, aLi[1])
        }
        for (let index = 0; index < limitLeft + 1; index++) {
            let el = aLi[nowClick - index];
            el.style.display = "block";
        }
        for (let index = 1; index < limitRight; index++) {
            let el = aLi[nowClick + index];
            el.style.display = "block";

        }
        if (rightI != null) {
            rightI.parentNode.removeChild(rightI)
        }
    }
    //中间部分
    else {
        for (let index = 0; index < limitLeft; index++) {
            let el = aLi[nowClick - index];
            el.style.display = "block";
        }
        for (let index = 1; index < limitRight; index++) {
            let el = aLi[nowClick + index];
            el.style.display = "block";

        }

        if (leftI === null) {
            let oI = document.createElement("i");
            oI.id = "leftI"
            oI.innerHTML = "......"
            oul.insertBefore(oI, aLi[1])
        }
        if (rightI === null) {
            let oIs = document.createElement("i");
            oIs.id = "rightI"
            oIs.innerHTML = "......"
            oul.insertBefore(oIs, aLi[aLi.length - 1])
        }

    }
    buttonFunction()
}
//分页按钮功能
function buttonFunction() {
    //上页按钮
    function buttonPrev() {
        let oPrev = document.getElementsByClassName("SBlogToFirst")[0];
        oPrev.onclick = function () {
            var nowClick = document.getElementsByClassName("nowPageNum")[0];
            let oPrevObj = nowClick.previousElementSibling;
            if (oPrevObj) {
                //    console.log(1)
                nowClick.classList.remove("nowPageNum");
                oPrevObj.classList.add("nowPageNum");
                oPrevObj.click();
            } else {
                alert("已经是开头了，憨瓜~")
            }
        }
    }
    //下页按钮
    function buttonNext() {
        let oNext = document.getElementsByClassName("SBlogToLast")[0];
        oNext.onclick = function () {
            var nowClick = document.getElementsByClassName("nowPageNum")[0];
            let oNextObj = nowClick.nextElementSibling;
            if (oNextObj) {
                //    console.log(1)
                nowClick.classList.remove("nowPageNum");
                oNextObj.classList.add("nowPageNum");
                oNextObj.click();
            } else {
                alert("正在持续更新中......")
            }
        }
    }
    // 跳转某页
    function goPage() {
        var SBlogNum = document.getElementById("SBlogNum")
        var oul = document.getElementById("sectionBlogButton");
        let aLi = oul.getElementsByTagName("li")
        var buttonGo = document.getElementById("buttonGo")
        var timer = null;
        let goPageNum = /^[0-9]+$/
        var remind = document.getElementById("remind");
        SBlogNum.onfocus = function () {
            SBlogNum.value = null;
            remind.style.display = "none"
            // SBlogNum.style.border="1px red solid";
            timer = setInterval(function () {
                if (goPageNum.test(SBlogNum.value) && SBlogNum.value <= aLi.length && SBlogNum.value != 0) {
                    SBlogNum.style.outline = "1px green solid";
                } else {
                    SBlogNum.style.outline = "1px red solid";
                }
            }, 1)
        }
        SBlogNum.onblur = function () {
            clearInterval(timer);
            // console.log(SBlogNum)
            if (SBlogNum.value != "") {
                if (goPageNum.test(SBlogNum.value) && SBlogNum.value <= aLi.length && SBlogNum.value != 0) {
                    SBlogNum.style.outline = "1px green solid";
                } else {
                    SBlogNum.style.outline = "1px red solid";
                }
            } else {
                SBlogNum.style.outline = "0px";
            }

        }
        buttonGo.onclick = function () {
            if (goPageNum.test(SBlogNum.value) && SBlogNum.value <= aLi.length && SBlogNum.value != 0) {
                aLi[SBlogNum.value - 1].click();
                SBlogNum.style.outline = "0px";
                SBlogNum.value = "";


            } else {
                remind.style.display = "block"
                remind.style.right = "-" + remind.clientWidth - 5 + "px"
            }
        }
    }
    buttonPrev()
    buttonNext()
    goPage()

}